<template>
  <div class="marketManagement-container">
    <div class="top-container">
      <el-col :span="4">
        <el-button
          type="primary"
          class="main-btn"
          size="mini"
          @click="addMarketRule"
        >添加市场规则</el-button>
      </el-col>
    </div>
    <el-table
      header-cell-class-name="table-header"
      :data="listData"
      border
    >
      <el-table-column
        label="序号"
        :width="100"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="营销地区"
        :min-width="100"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.product_no }}
        </template>
      </el-table-column>
      <el-table-column
        label="地 / 市"
        :min-width="100"
        header-align="center"
      >
        <template #default="scope">
          {{ scope.row.product_no }}
        </template>
      </el-table-column>
      <el-table-column
        label="市场开发阶段"
        :min-width="100"
        header-align="center"
      >
        <template #default="scope">
          {{ scope.row.product_no }}
        </template>
      </el-table-column>
      <el-table-column
        label="适用营销模式"
        :min-width="100"
        header-align="center"
      >
        <template #default="scope">
          {{ scope.row.product_no }}
        </template>
      </el-table-column>
      <el-table-column
        label="控销设置"
        :min-width="100"
        header-align="center"
      >
        <template #default="scope">
          {{ scope.row.product_no }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        header-align="center"
        align="center"
        width="280"
      >
        <template #default>
          <el-button
            type="text"
            @click="editMarketRule"
          >编辑</el-button>
          <el-button
            type="text"
            class="danger"
            @click="deleteItem"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加市场规则 -->
    <create-rule-dialog
      ref="createRuleRef"
      :types="types"
    />
  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, reactive, ref,} from 'vue'

export default defineComponent({
  components: {
    createRuleDialog: defineAsyncComponent(() =>
      import('./modules/createRuleDialog.vue')
    ),
  },

  setup(props, context) {
    const currentInstance = getCurrentInstance()
    var createRuleRef = ref(null)
    var types = ref('create')
    var listData = reactive([
      {
        product_no: 'F123450',
      },
    ])
    // 添加市场规则
    const addMarketRule = () => {
      types.value = 'create'
      createRuleRef.value.open()
    }
    // 编辑市场规则
    const editMarketRule = () => {
      types.value = 'edit'
      createRuleRef.value.open()
    }

    // 删除产品
    const deleteItem = () => {
      console.log(currentInstance.proxy)
      currentInstance.proxy
        .alertBox({
          message: '数据删除后不可恢复，确定删除？',
          title: '市场规则删除',
        })
        .then(() => {
          console.log('确定')
        })
        .catch((err) => {
          console.log(err)
        })
    }
    return {
      types,
      createRuleRef,
      listData,
      deleteItem,
      addMarketRule,
      editMarketRule,
    }
  },
})
</script>
